<script setup lang="ts">
// https://mrhj.gitee.io/form-generator/#/ 表单设计器
import { ref, reactive, onMounted, defineEmits } from "vue";
import type { FormRules, UploadProps } from "element-plus";
import {
  AddCourse,
  getCourseFolderList,
  createCourse,
  fileUploadUrl
} from "@/api/lms/course";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};

const courseForm = ref<AddCourse>();
const isAdd = ref(true);
const dialogVisible = ref(false);

const showdialogForAdd = () => {
  isAdd.value = true;
  courseForm.value = {
    name: "",
    kind: 1,
    code: "",
    cover: "",
    describe: "",
    allowedX: 0,
    classHour: 0,
    classScore: 0,
    label: "",
    supportMobile: false,
    folderId: "",
    sort: 0,
    coursewareIds: []
  };
  dialogVisible.value = true;
};

const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: "请输入用户账号",
      trigger: "blur"
    }
  ],
  nickname: [],
  status: [
    {
      required: true,
      message: "状态不能为空",
      trigger: "change"
    }
  ],
  email: [],
  roleIds: [
    {
      required: true,
      type: "array",
      message: "请至少选择一个角色",
      trigger: "change"
    }
  ],
  deptId: [
    {
      required: true,
      message: "请选择用户所属部门",
      trigger: "change"
    }
  ]
});

const folderList = ref<any>([]);

onMounted(() => {
  getCourseFolderList().then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.name,
        value: item.folderId
      });
      folderList.value = li;
    });
  });
});

const onSubmit = () => {
  console.log(courseForm.value);
  if (isAdd.value) {
    createCourse(courseForm.value).then(() => {
      dialogVisible.value = false;
      onSearchTable();
    });
  } else {
    console.log(courseForm.value);
  }
};

defineExpose({
  showdialogForAdd
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(">>", response, uploadFile);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  console.log(rawFile);
  return true;
};
</script>

<template>
  <el-dialog v-model="dialogVisible" title="创建课程">
    <el-form
      ref="elForm"
      :model="courseForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="课程编号" prop="code">
        <el-input
          v-model="courseForm.code"
          placeholder="请输入课程编号"
          :maxlength="20"
          show-word-limit
          clearable
          prefix-icon="el-icon-user"
        />
      </el-form-item>
      <el-form-item label="课程名称" prop="name">
        <el-input
          v-model="courseForm.name"
          placeholder="请输入课程名称"
          :maxlength="20"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="课程目录" prop="folderId">
        <el-select
          v-model="courseForm.folderId"
          placeholder="请选择课程所属目录"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in folderList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="倍速播放" prop="allowedX">
        <el-input-number
          v-model="courseForm.allowedX"
          :min="0"
          :max="10"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="学分" prop="classScore">
        <el-input-number
          v-model="courseForm.classScore"
          :min="0"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="学时" prop="classHour">
        <el-input-number
          v-model="courseForm.classHour"
          :min="0"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="标签" prop="label">
        <el-input
          v-model="courseForm.label"
          placeholder="标签"
          :maxlength="20"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="课程描述" prop="describe">
        <el-input
          v-model="courseForm.describe"
          placeholder="请输入课程描述"
          :maxlength="20"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="上传封面">
        <el-upload
          action=""
          :http-request="fileUploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-button link type="primary" :icon="useRenderIcon(AddFill)">
            选择文件
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
